<!DOCTYPE html>
<html class="pixel-ratio-1"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>茵曼商城</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/sm.min.css">
    <link rel="stylesheet" href="css/sm-extend.min.css">
    <link rel="stylesheet" href="css/inman.css">
    <script src="https://hm.baidu.com/hm.js?5ee51ef74fa865950bb9a2757fdb33ad"></script><script type="text/javascript" src="js/zepto.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/sm.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/sm-extend.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/functions.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/TouchSlide.1.1.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?5ee51ef74fa865950bb9a2757fdb33ad";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<div class="page-group address2-page">
    <div class="page page-current" id="page-1510723957797">
        <!--标题栏-->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left" href="javascript:history.back(-1);"></a>
            <a class="icon pull-right" href="javascript:void(0)" id="address-submit" style="font-size: 0.8rem;color: #000;font-family: 'Microsoft YaHei', sans-serif">保存</a>
            <h1 class="title">修改收货地址</h1>
        </header>

        <!--内容区-->
        <div class="content native-scroll">
            <form action="http://m.inman.com.cn/index.php/User/addUpdateAddr" method="post" id="address-form">
                <input type="hidden" name="province_id" id="province" value="110000">
                <input type="hidden" name="city_id" id="city" value="110100">
                <input type="hidden" name="district_id" id="district" value="110112">
                <input type="hidden" name="is_default" id="is_default" value="0">
                <input type="hidden" name="addr_id" id="addr_id" value="286801">

                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">收货人</div>
                                    <div class="item-input">
                                        <input type="text" id="uname" name="username" placeholder="请输入收货人姓名" value="信春廷">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">手机号码</div>
                                    <div class="item-input">
                                        <input type="text" id="phone" name="mobile" placeholder="请输入收货手机号码" value="15910288070">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-password"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">所在地区</div>
                                    <div class="item-input">
                                        <a href="javascript:void(0)" class="open-panel" data-panel="#panel-right" id="open-panel" style="color:#000">
                                            北京北京市通州区                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-gender"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">邮编</div>
                                    <div class="item-input">
                                        <input type="text" name="zip" placeholder="请输入邮政编码" value="10000">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">详细地址</div>
                                    <div class="item-input">
                                        <textarea id="address" name="addr">土桥</textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="list-block">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">设为默认</div>
                                    <div class="item-input" style="text-align: right">
                                        <label class="label-switch">
                                            <input type="checkbox" id="defaultbtn">

                                            <div class="checkbox"></div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>

    <!-- 侧栏 -->
    <div class="panel-overlay"></div>
    <!-- 省份 -->
    <div class="panel panel-right panel-cover" id="panel-right" style="background: #fff">
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left close-panel" href="#"></a>

            <h1 class="title">选择省份</h1>
        </header>
        <div class="content-block">
            <div class="list-block">
                <div class="list-group">
                    <ul class="province-li">
                        <li data-id="110000" data-name="北京">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">北京</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="120000" data-name="天津">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">天津</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="130000" data-name="河北省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">河北省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="140000" data-name="山西省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">山西省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="150000" data-name="内蒙古自治区">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">内蒙古自治区</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="210000" data-name="辽宁省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">辽宁省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="220000" data-name="吉林省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">吉林省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="230000" data-name="黑龙江省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">黑龙江省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="310000" data-name="上海">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">上海</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="320000" data-name="江苏省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">江苏省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="330000" data-name="浙江省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">浙江省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="340000" data-name="安徽省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">安徽省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="350000" data-name="福建省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">福建省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="360000" data-name="江西省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">江西省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="370000" data-name="山东省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">山东省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="410000" data-name="河南省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">河南省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="420000" data-name="湖北省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">湖北省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="430000" data-name="湖南省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">湖南省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="440000" data-name="广东省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">广东省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="450000" data-name="广西壮族自治区">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">广西壮族自治区</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="460000" data-name="海南省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">海南省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="500000" data-name="重庆">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">重庆</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="510000" data-name="四川省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">四川省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="520000" data-name="贵州省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">贵州省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="530000" data-name="云南省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">云南省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="540000" data-name="西藏自治区">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">西藏自治区</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="610000" data-name="陕西省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">陕西省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="620000" data-name="甘肃省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">甘肃省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="630000" data-name="青海省">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">青海省</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="640000" data-name="宁夏回族自治区">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">宁夏回族自治区</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="650000" data-name="新疆维吾尔自治区">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">新疆维吾尔自治区</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="710000" data-name="台湾">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">台湾</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="810000" data-name="香港特别行政区">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">香港特别行政区</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="820000" data-name="澳门特别行政区">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">澳门特别行政区</div>
                                </div>
                            </div>
                        </li>
                        <li data-id="990000" data-name="海外">
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title">海外</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--城市-->
    <div class="panel panel-right panel-cover" id="panel-city" style="background: #fff">
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left close-panel" href="#"></a>

            <h1 class="title">选择城市</h1>
        </header>
        <div class="content-block">
            <div class="list-block">
                <div class="list-group">
                    <ul class="city-li">
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--县区-->
    <div class="panel panel-right panel-cover" id="panel-district" style="background: #fff">
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left close-panel" href="#"></a>

            <h1 class="title">选择城市</h1>
        </header>
        <div class="content-block">
            <div class="list-block">
                <div class="list-group">
                    <ul class="district-li">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            //省市县联动
            $('.province-li li').click(function () {
                var provinceId = $(this).data('id');
                var provinceName = $(this).data('name');
                $('#province').val(provinceId);
                $('#open-panel').html(provinceName + ' ');
                $('#open-panel').css({'color': '#000'});
                $(this).addClass('on');
                $(this).siblings('li').removeClass('on');
                var uri = "http://m.inman.com.cn/index.php/User/getRegions";
                $.showIndicator();
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: uri,
                    data: {p_region_id: provinceId},
                    async: false,
                    success: function (json) {
                        $.hideIndicator();
                        $("#city").val('');
                        $("#district").val('');
                        json = eval('(' + json + ')');
                        if (json.errcode != '1') {
                            $.toast(json.errmsg);
                            return false;
                        }
                        var html = '';
                        var regiondata = json.data;
                        for (var i = 0; i < regiondata.length; i++) {
                            html += '<li data-id="' + regiondata[i].region_id + '" data-name="' + regiondata[i].local_name + '"><div class="item-content"> <div class="item-inner"> <div class="item-title">' + regiondata[i].local_name + '</div> </div> </div> </li>';
                        }
                        $("ul.city-li").children().remove();
                        $("ul.city-li").append(html);
                        cityClick();
                    }
                });
                $.openPanel('#panel-city');
            });

            $('#defaultbtn').change(function () {
                if ($(this).attr('checked') == true) {
                    $("#is_default").val('1');
                } else {
                    $("#is_default").val('0');
                }
            });

            //提交表单
            $('#address-submit').click(function () {
                var uname = $('#uname').val();
                var phone = $('#phone').val();
                var province = $('#province').val();
                var city = $('#city').val();
                var district = $('#district').val();
                var address = $('#address').val();
                var rule = /^1[34578]\d{9}$/;

                if (uname.length < 1) {
                    $.toast("请输入收货人姓名");
                    return false;
                }
                if (!rule.test(phone)) {
                    $.toast("请输入一个有效的手机号码");
                    return false;
                }
                if (province == '' || city == '' || district == '') {
                    $.toast("请选择收货地区");
                    return false;
                }
                if (address.length < 1) {
                    $.toast("请输入详细地区");
                    return false;
                }
                form_submit($("#address-form"));
            });
        });

        function cityClick() {
            $('.city-li li').click(function () {
                var cityId = $(this).data('id');
                var cityName = $(this).data('name');
                $('#city').val(cityId);
                $('#open-panel').append(cityName + ' ');
                $(this).addClass('on');
                $(this).siblings('li').removeClass('on');
                var uri = "http://m.inman.com.cn/index.php/User/getRegions";
                $.showIndicator();
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: uri,
                    data: {p_region_id: cityId},
                    async: false,
                    success: function (json) {
                        $.hideIndicator();
                        json = eval('(' + json + ')');
                        if (json.errcode != '1') {
                            $.toast(json.errmsg);
                            return false;
                        }
                        html = '';
                        regiondata = json.data;
                        for (var i = 0; i < regiondata.length; i++) {
                            html += '<li data-id="' + regiondata[i].region_id + '" data-name="' + regiondata[i].local_name + '"> <div class="item-content"> <div class="item-inner"> <div class="item-title">' + regiondata[i].local_name + '</div> </div> </div> </li>';
                        }
                        $("ul.district-li").children().remove();
                        $("ul.district-li").append(html);
                        districtClick();
                    }
                });
                $.openPanel('#panel-district');
            });
        }

        function districtClick() {
            $('.district-li li').unbind('click');
            $('.district-li li').click(function () {
                var districtId = $(this).data('id');
                var districtName = $(this).data('name');
                $('#district').val(districtId);
                $('#open-panel').append(districtName);
                $(this).addClass('on');
                $(this).siblings('li').removeClass('on');
                $.closePanel()
            });
        }

        $.init();
    </script>
</div>

</body></html>